<script setup lang="ts">
import { ref } from "vue";
import DefaultLayout from '../layouts/DefaultLayout.vue';
import { useUserStore } from "../store/user.ts";
import { useNavbarStore } from '../store/navbar';
import { useCartStore } from '../store/cartStore';
import { useRouter } from "vue-router";
import { Address } from "../apis/address.ts";
import * as AddressApi from '../apis/address.ts'
import * as OrderApi from '../apis/history.ts'

const userStore = useUserStore()
const navbarStore = useNavbarStore()
const cartStore = useCartStore()
const router = useRouter()

const updatePage = (page) => {
    navbarStore.setActiveMenu(page)
    if (page !== '/') navbarStore.setDropmenuVisible(true)
    else navbarStore.setDropmenuVisible(false)
}

const deleteGoods = (goodsId) => {
    cartStore.removeFromCart(goodsId)
}

const updateNum = (goods) => {
    goods.cgPrice = goods.cgNum * goods.goodsSpecs.goodsPrice
    cartStore.updateQuantity(goods)
}

const address = ref()
const addressList = ref<Address[]>([]);
const getAddressList = () => {
    console.log(userStore.id)
    AddressApi.getAddressList(userStore.id)
        .then((res) => {
            addressList.value = res.data
        })
}
getAddressList()

const remark = ref()

const addOrder = () => {
    if (remark.value === undefined || remark.value === '') {
        remark.value = '无'
    }
    const newCartList = cartStore.cartList.map(item => {
        const { goodsSpecs, goods, ...rest } = item;
        return rest;
    });
    var orderItems = ref({
        oAddressId: address.value.aId, //地址ID
        oConsignee: address.value.aConsignee, //下单人
        oOrderTime: new Date(), //下单时间
        oPhone: address.value.aPhone, //下单人电话号码
        oRemark: remark.value, //订单备注
        oState: 0,
        oTotalPrice: cartStore.totalPrice, //订单总价
        orderGoodsList: newCartList,
        userId: userStore.id

    })
    OrderApi.addOrder(orderItems.value)
        .then(res => {
            console.log(res);
            cartStore.getCartList(userStore.id)
            router.push({name: 'PayOrder', query: {orderId : res.data}})
        })
        .catch(res => {
            console.log(res);
        })
    
}

</script>

<template>
    <DefaultLayout>
        <div class="bg-white">

        </div>
        <div class="mx-36 my-8 ">

            <el-breadcrumb class="mb-6" separator="/">
                <el-breadcrumb-item :to="{ path: '/' }" @click="updatePage('/')">首页</el-breadcrumb-item>
                <el-breadcrumb-item>购物车</el-breadcrumb-item>
            </el-breadcrumb>

            <div class="content w-full flex">
                <div class="cart_list bg-white">
                    <table v-if="cartStore.totalQuantity !== 0" class="min-w-full bg-white rounded-md">
                        <thead>
                            <tr>
                                <th class="py-3 pl-6 pr-4  text-left text-sm font-semibold text-gray-600"></th>
                                <th class="py-4 px-6  text-left text-sm font-semibold text-gray-600"></th>
                                <th class="py-4 px-6  text-left text-sm font-semibold text-gray-600">
                                    产品</th>
                                <th class="py-4 px-6 text-left text-sm font-semibold text-gray-600">
                                    价格</th>
                                <th class="py-4 px-6 text-left text-sm font-semibold text-gray-600">
                                    数量</th>
                                <th class="py-4 w-20 pl-4 pr-6 text-left text-sm font-semibold text-gray-600">
                                    小计
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item, index) in cartStore.cartList" :key="index" class="odd:bg-[#f7f8f8]">
                                <td class="py-3 pl-6 pr-4">
                                    <div class="flex items-center" @click="deleteGoods(item.cgId)">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"
                                            class="w-3 h-3 cursor-pointer">
                                            <path
                                                d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z" />
                                        </svg>
                                    </div>
                                </td>
                                <td class="py-4 px-6">
                                    <img :src="item.goods.goodsPhoto" alt="goods"
                                        class="w-16 h-16 object-cover mr-4 rounded-md">
                                </td>
                                <td class="py-4 px-6">
                                    <div class="text-red-500">
                                        {{ item.goods.goodsName }}
                                    </div>
                                    <div v-for="(value, key) in JSON.parse(item.goodsSpecs.goodsSpecs)"
                                        class="flex gap-4" :key="key">
                                        <div class="font-bold">
                                            {{ key }}
                                        </div>
                                        <div>
                                            {{ value }}
                                        </div>
                                    </div>
                                </td>
                                <td class="py-4 px-6">
                                    <span>¥{{ item.goodsSpecs.goodsPrice }}</span>
                                </td>
                                <td class="py-4 px-6">
                                    <div class="flex items-center">
                                        <el-input-number v-model="item.cgNum" :min="1" :change="updateNum(item)" />
                                    </div>
                                </td>
                                <td class="pl-4 pr-6">
                                    <span>¥{{ item.cgPrice }}</span>
                                </td>
                            </tr>
                        </tbody>
                    </table>

                    <div v-else class="bg-white flex flex-col justify-center items-center h-full">
                        <img class="h-44 w-44" src="../assets/image/goodsEmpty.svg" alt="empty">
                        <p class="text-slate-400 mt-3">购物车空空如也</p>
                    </div>
                </div>

                <div class="total_card ml-8">
                    <h2 class="text-lg font-semibold mb-4">购物车总计</h2>

                    <div class="bg-white p-4">
                        <div class="flex justify-between mb-2">
                            <span class="font-bold text-sm p-4">小计</span>
                            <span class="text-sm p-4">¥{{ cartStore.totalPrice }}</span>
                        </div>

                        <div class="border-t border-gray-300 my-2"></div>
                        <div class="mb-2">
                            <div class="flex justify-between">
                                <span class="font-bold text-sm p-4">配送</span>
                                <div class="text-sm p-4">
                                    <div>统一费率</div>
                                </div>
                            </div>
                            <div>
                                <div class="text-sm pb-4 px-4">配送至</div>
                                <el-select v-model="address" placeholder="请选择地址">
                                    <el-option v-for="item in addressList" :key="item" :label="item.aDetail"
                                        :value="item" class="h-16">
                                        <div>
                                            <h3 class="text-sm text-slate-800 font-bold">收货人：{{ item.aConsignee }}
                                            </h3>
                                        </div>
                                        <div class="mt-1">
                                            <h3 class="text-xs text-slate-800 font-bold">手机号：{{ item.aPhone }}</h3>
                                        </div>
                                        <div class="mt-1">
                                            <h3 class="bottom-2 text-xs max-w-sm truncate text-slate-600">
                                                地址：
                                                {{ item.aProvinceName }}
                                                {{ item.aCityName }}
                                                {{ item.aDistrictName }}
                                                {{ item.aDetail }}
                                            </h3>
                                        </div>
                                    </el-option>
                                </el-select>
                            </div>
                        </div>
                        <div class="border-t border-gray-300 my-2"></div>

                        <div class="flex justify-between mb-2">
                            <span class="font-bold text-sm p-4">备注</span>
                            <el-input class="flex items-center" v-model="remark" type="textarea" placeholder="请输入订单备注"
                                resize="none" />

                        </div>
                        <div class="border-t border-gray-300 my-2"></div>

                        <div class="flex justify-between">
                            <span class="font-bold text-sm p-4">合计</span>
                            <span class="text-red-500 text-xl font-bold p-4">¥{{ cartStore.totalPrice }}</span>
                        </div>
                    </div>
                    <el-button class="w-full bg-[#d0021b] text-white py-2 mt-4 h-10 transition duration-300 ease-in-out"
                        :disabled="!address || cartStore.totalQuantity === 0" @click="addOrder()">去结算 →</el-button>
                </div>
            </div>
        </div>
    </DefaultLayout>
</template>

<style scoped>
.product_remove {
    width: 6%;
}

.cart_list {
    width: 72%
}

.total_card {
    width: 23%
}

:deep(.el-input-number__decrease:hover) {
    color: #f44336;
}

:deep(.el-input-number__increase:hover) {
    color: #f44336;
}

.el-button:hover {
    background-color: #d0021b;
    color: white;
    opacity: 75%;
}

.el-button.is-disabled,
.el-button.is-disabled:hover {
    background-color: var(--el-button-disabled-bg-color);
    background-image: none;
    border-color: var(--el-button-disabled-border-color);
    color: var(--el-button-disabled-text-color);
    cursor: not-allowed;
}
</style>
